<template>
  <div class="pixelstream_contianer">
    <div id="player"></div>
    <div class="code_container">
      <codemirror
        class="codemirror"
        v-model="code"
        :options="cmOptions"
      ></codemirror>
      <div class="codeOperate">
        <fks-button type="primary" @click="runCode">运行</fks-button>
        <!-- <fks-button type="primary" @click="testMethod">test</fks-button> -->
      </div>
      <div class="sdk">
        <div class="sdkItem" v-for="item in sdkList" :key="item.id">
          <div class="sdkTitle">{{ item.title }}</div>
          <div class="sdkChild">
            <div
              class="sdkChildItem"
              v-for="child in item.children"
              :key="child.id"
            >
              <div class="sdkChildTitle" @click="checkSdk(child.code)">
                {{ child.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Fpstream from "@fqbbmnnnnnn/fpstream";
import { getUeInstanceById } from "../../apis/ueinstance";
import { codemirror } from "vue-codemirror";
import "./sdk/codemirror.config";
import { SdkMap } from "./sdk/index.js";
export default {
  //import引入组件才能使用
  components: { codemirror },
  props: {},
  data() {
    return {
      code: "//请选择下方sdk功能，并点击运行调试",
      cmOptions: {
        line: true,
        theme: "3024-day", // 主题
        tabSize: 4, // 制表符的宽度
        indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
        firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
        readOnly: false, // 只读
        autorefresh: true,
        smartIndent: true, // 上下文缩进
        lineNumbers: true, // 是否显示行号
        styleActiveLine: true, // 高亮选中行
        viewportMargin: Infinity, //处理高度自适应时搭配使用
        showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
        mode: "javascript",
      },
    };
  },
  // 计算属性
  computed: {
    sdkList() {
      return SdkMap;
    },
  },
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init() {
      const dom = document.getElementById("player");
      getUeInstanceById({ id: this.$route.params.token }).then((res) => {
        if (res) {
          window.fpstream = new Fpstream(
            dom,
            `ws://${res.data.instanceIp}:${res.data.port}`,
            {
              HoveringMouse: true,
            }
          );
          fpstream.connect();
        }
      });
    },
    runCode() {
      try {
        eval(this.code); // 执行代码，谨慎使用!
        this.$message({
          type: "success",
          message: "代码执行成功!",
        });
      } catch (error) {
        console.error("执行代码时发生错误:", error);
        this.$message({
          type: "error",
          message: "代码执行失败!",
        });
      }
    },
    testMethod() {},
    checkSdk(val) {
      this.code = val;
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {},
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
};
</script>
<style scoped lang="scss">
.pixelstream_contianer {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#player {
  width: 100%;
  height: 100%;
}
.code_container {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 90%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
.codemirror {
  height: 500px;
}
::v-deep .CodeMirror {
  height: 500px;
  background: rgba(255, 255, 255, 0);
}
.codeOperate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 40px;
}
.sdk {
  width: 100%;
  height: calc(100% - 540px);
  padding: 15px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.sdkItem {
  margin-bottom: 15px;
}
.sdkTitle {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.sdkChild {
  cursor: pointer;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sdkChildItem {
  font-size: 16px;
  color: #333;
}
.sdkChildItem:hover {
  color: #409eff;
}
</style>
